<template>
  <div>
    <!-- 重置密码 -->

    <form>
      <div :class="{ active: active == 1 }">
        <input
          type="text"
          placeholder="请设置登录密码"
          @blur="active = ''"
          @focus="active = 1"
        />
      </div>

      <div :class="{ active: active == 2 }">
        <input
          type="text"
          placeholder="请再次输入密码"
          @blur="active = ''"
          @focus="active = 2"
        />
      </div>

      <div class="login">
        <p>提交</p>
      </div>
    </form>
  </div>
</template>

<script>
export default {
 
  data() {
    return {
        active:"1"
    };
  },

  mounted() {
    // console.log( this.$route )
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.logo {
  width: 100vw;
  height: 200px;
  text-align: center;

  img {
    width: 525px;
    height: 115px;
    margin: 50px;
  }
}

form {
  font-size: 30px;
  > div {
    width: 80vw;
    display: flex;
    justify-content: space-between;
    // padding: 0 50px;
    margin: 50px auto;
  }
  input {
    border: none;
    width: 100%;
  }
}

.active {
  border-bottom: 1px solid red;
}
.login {
  width: 80vw;
  height: 50px;
  border-radius: 20px;
  // background: palevioletred;
  background: url("@/assets/theme-img/login-btn.png") no-repeat 100%;
  p {
    margin: 0 auto;
  }
}
</style>